<template>
  <div>
    <!-- <h3 style="text-align: left;">物资管理</h3> -->
    <el-row>
        <el-col :span="12" style="text-align: left;">
            <el-form :inline="true" :model="queryGoodsForm" class="demo-form-inline">
                <el-form-item label="仓库" clearable>
                    <el-select v-model="queryGoodsForm.warehouseId" placeholder="请选择" clearable>
                        <el-option
                        v-for="item in warehouses"
                        :key="item.warehouseId"
                        :label="item.warehouseName"
                        :value="item.warehouseId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物资名称">
                    <el-input v-model="queryGoodsForm.goodsName" placeholder="请输入物资名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="4" :offset="8" style="text-align: right;">
            <el-button-group>
                <el-button type="primary" @click="addGoods">新增</el-button>
                <el-button type="primary" @click="editGoods">编辑</el-button>
                <el-button type="danger" @click="delGoods">删除</el-button>
            </el-button-group>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="20" :offset="2">
            <el-table
                ref="multipleTable"
                height="600"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                border
                highlight-current-row
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                align="center"
                width="55">
                </el-table-column>
                <el-table-column
                prop="goodsId"
                label="物资编号"
                align="center"
                >
                </el-table-column>
                <el-table-column
                prop="goodsName"
                label="物资名称"
                align="center"
                >
                </el-table-column>
                <el-table-column
                prop="goodsNum"
                label="物资数量"
                align="center"
                >
                </el-table-column>
                
                <el-table-column
                prop="warehouseName"
                label="所在仓库"
                align="center"
                >
                </el-table-column>
                <el-table-column
                prop="storeTime"
                label="入库时间"
                align="center"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                label="操作"
                align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="viewPicture(scope.$index, scope.row)">查看图片</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 15, 20]"
            :page-size="100"
            layout=" prev, pager, next, total, sizes,jumper"
            :total="total">
            </el-pagination>
        </el-col>
    </el-row>
    <el-dialog
      title="查看图片"
      :visible.sync="centerDialogVisible"
      width="30%"
      @brfore-close="centerDialogVisible = false"
      center>
      <span style="text-align: center;">
        <el-upload
        class="upload"
        action="#"
        list-type="picture-card"
        :disabled="true"
        >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 150px; height: 150px; object-fit: cover;">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'GoodsManager',
    data(){
        return{
            queryGoodsForm: {
                warehouseId:"",
                goodsName:'',
                current:1,
                size:10
            },
            warehouses:[],
            tableData:[],
            total:0,
            checkedData:[],
            user:{
              empno:0
            },
            imageUrl:'',
            centerDialogVisible:false

        }
    },
    watch:{
      'queryGoodsForm.warehouseId':{
        handler(){
          this.queryGoodsForm.current = 1;
        }
      },
      'queryGoodsForm.goodsName':{
        handler(){
          this.queryGoodsForm.current = 1;
        }
      }
    },
    methods: {
    // Add your methods here
    query() {
    //   console.log(this.queryGoodsForm)
      this.$http.post("/lc/selectGoodsByWarehouseId",this.queryGoodsForm).then(res => { 
        this.tableData = res.data.data
        this.total = res.data.total
        
      }).catch(err => {
        console.error("Error querying goods:", err);
        this.$message.error("查询物资失败: " + err.message);
      })

    },
    getWarehouse(){
        this.$http.get("/lc/queryWarehouse").then(res => {
            this.warehouses = res.data;
        }).catch(err => {
          console.error("Error getting warehouses:", err);
          this.$message.error("获取仓库信息失败: " + err.message);
        })
    },
    handleSelectionChange(val) {
      this.checkedData = val;
    },
    handleSizeChange(val) {
        this.queryGoodsForm.size = val;
        this.query()
    },
    handleCurrentChange(val) {
        this.queryGoodsForm.current = val;
        this.query()
    },
    viewPicture(index, row) {
      this.centerDialogVisible = true
      // Display backend image
      this.imageUrl = row.goodsPicture
    },
    addGoods() {
      this.$router.push({
        path: '/addorEditGoods'
      })
    },
    editGoods() {
      if (this.checkedData.length == 0){
        this.$message.error('请选择要编辑的物资！')
      } else if (this.checkedData.length > 1) {
        this.$message.error('只能选择一个物资进行编辑！')
      } else {
        this.$router.push({
          path: '/addorEditGoods',
          query: {
            goods: this.checkedData[0]
          }
        })
      }
    },
    delGoods() {
      if (this.checkedData.length == 0){
        this.$message.error('请选择要删除的物资！')
      } else {
        this.$confirm('此操作将永久删除该物资, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let delGoodsIds = []
          this.checkedData.forEach(item => {
            // console.log(item)
            delGoodsIds.push(item.goodsId)
          })
          let delForm = {
            goodsIDs: delGoodsIds,
            logEmpNo: this.user.empno
          }
          // console.log(delGoodsIds)
          this.$http.post("/lc/deleteGoods",delForm).then(res => {
            if (res.data == "success"){
                this.$message.success("删除成功")
                this.query()
            } else {
                this.$message.error("选中在借物资，删除失败")
            }
          }).catch(err => {
            console.error("Error deleting goods:", err);
            this.$message.error("删除物资失败: " + err.message);
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
      })
      }
      
    },

  },
  mounted(){
    this.user.empno = localStorage.getItem("empno")
    this.getWarehouse()
    this.query()
    if (this.$route.query.msg != null){
        this.$message.success(this.$route.query.msg)
    }
  }
}
</script>

<style>

</style>